<template>
    <el-card shadow="never">
        <div class="wiseman-list">
            <ZwSearchForm :option="searchOption" @search="search" @reset="reset" />
            <ZwTable
                ref="tableRef"
                class="table-box"
                :option="tableOption"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"></ZwTable>
        </div>
    </el-card>
</template>
<script setup lang="tsx">
import { reactive, ref, computed, onMounted } from 'vue';
import ZwTable from '@/components/zw/table/Table';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import { getWiseManList } from '@/api/ecommerce/wiseManList';
import { getWiseManUserList } from '@/api/ecommerce/userManage';
import { deepCopy } from '@/utils/helper';
import TableTooltip from './components/TableTooltip.vue';

import tableHeaderTooltip from '../../components/tableHeaderTooltip.vue';

const defaultParams = {
    daren_openid: '', //达人openid
    daren_channel_id: '0', //21-抖音达人 22-快手达人
    created_at: [], //创建时间
    updated_at: [], //更新时间
    page: 1
};
const belongOptionList = reactive([]);
const sourceVal = ref(null);
const searchRef = ref();
const searchOption = computed(() => {
    return [
        {
            label: '来源渠道',
            name: 'daren_channel_id',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择渠道',
            optionList: [{ label: '快手达人', value: '22' }],
            async change(val: any, from: any) {
                sourceVal.value = val;
                from.daren_openid = '';
                defaultParams.daren_openid = '';
                const daren_channel_id = sourceVal.value || '22'; // 以后增加的话，默认22改为0
                if (sourceVal.value != 0 && !sourceVal.value) {
                    belongOptionList.splice(0, belongOptionList.length);
                    return;
                }
                const data: any = await getWiseManList({
                    daren_channel_id,
                    auth_status: [2, 3],
                    page: 1,
                    page_size: 999
                });
                belongOptionList.splice(0, belongOptionList.length, ...data.data);
            }
        },
        {
            label: '归属达人',
            name: 'daren_openid',
            value: '',
            type: 'select',
            alway: true,
            placeholder: '请选择达人',
            optionList: belongOptionList,
            formatOption: (v: any) => ({
                label: v.daren_name,
                value: v.daren_openid
            })
        },
        {
            label: '创建时间',
            name: 'created_at',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        },
        {
            label: '更新时间',
            name: 'updated_at',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        }
    ];
});

const defaultParamsCopy = deepCopy(defaultParams);
defaultParamsCopy.daren_channel_id = 22;
const state = reactive({
    searchParams: defaultParamsCopy
});
const tableRef = ref<any>(null);
const tableOption = [
    // todo:用户id
    {
        prop: 'user_no',
        label: '用户ID',
        minWidth: 155,
        render({ row, column, index }: any) {
            return <div>{row.user_no || '--'}</div>;
        },
        renderHeader() {
            const content = [{ text: '客易达用户唯一标识' }];
            return <tableHeaderTooltip title="用户ID" content={content} />;
        }
    },
    // todo:来源渠道
    {
        prop: 'daren_channel_name',
        label: '来源渠道',
        width: 120,
        render({ row, column, index }: any) {
            return <elPopoverTips content={row.daren_channel_name} />;
        }
    },
    // todo:归属达人
    {
        prop: 'daren_info',
        label: '归属达人',
        minWidth: 155,
        render({ row, column, index }: any) {
            // return <elPopoverTips content={row.order_shop} isArr={true} />;
            const { daren_info = [] } = row;
            if (!daren_info || !daren_info.length) {
                return '--';
            } else {
                return <TableTooltip content={daren_info} />;
            }
        }
    },
    // todo:购买账号
    {
        prop: 'external_user_id',
        label: '购买账号',
        minWidth: 155,
        render({ row, column, index }: any) {
            return <div>{row.external_user_id || '--'}</div>;
        },
        renderHeader() {
            const content = [{ text: '来源渠道的唯一标识' }];
            return <tableHeaderTooltip title="购买账号" content={content} />;
        }
    },
    // todo:创建时间
    {
        prop: 'created_at',
        label: '创建时间',
        width: 180,
        render({ row, column, index }: any) {
            return <div>{row.created_at || '--'}</div>;
        }
    },
    // todo:更新时间
    {
        prop: 'updated_at',
        label: '更新时间',
        width: 180,
        render({ row, column, index }: any) {
            return <div>{row.updated_at || '--'}</div>;
        }
    }
];

const search = (data: any) => {
    // 后期去掉22
    const defaultParamsCopy = deepCopy(defaultParams);
    defaultParamsCopy.daren_channel_id = 22;
    state.searchParams = deepCopy({ ...defaultParamsCopy, ...data });
};

const reset = v => {
    // 后期去掉22
    const defaultParamsCopy = deepCopy(defaultParams);
    defaultParamsCopy.daren_channel_id = 22;
    state.searchParams = deepCopy({ ...defaultParamsCopy });
    getBelongList();
};
//初始化归属达人列表
const getBelongList = async () => {
    const data: any = await getWiseManList({
        daren_channel_id: '22',
        auth_status: [2, 3],
        page: 1,
        page_size: 999
    });
    belongOptionList.splice(0, belongOptionList.length, ...data.data);
};
onMounted(() => {
    getBelongList();
});
const fetchApi = () => {
    return getWiseManUserList;
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
